<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <DIV id="app">
        <!-- 
            实现页面中元素的显示隐藏，创建删除等相关操作
            v-show 效率高但安全性低
         -->
        <p v-show="flag" style="background-color: blueviolet;">元素1</p>
        <p v-show="!flag" style="background-color: yellowgreen;">元素2</p>
        <input type="button" value="显示|隐藏" @click=" flag=!flag ">
        <!-- 
            v-if 效率偏低但安全性高
         -->
        <p v-if="flag" style="background-color: blueviolet;">元素1</p>
        <p v-if="!flag" style="background-color: yellowgreen;">元素2</p>
        <!-- JS 变量到 boolear 转换规则 -->
        <p v-if=" '' ">字符串-空字符串</p>
        <p v-if=" 'aaa' ">字符串-非空字符串</p>
        <p v-if=" 0 ">数值 0</p>
        <p v-if=" 1 ">数值 1</p>
        <p v-if=" null ">null</p>
        <p v-if=" undefined ">undefined</p>
        <p v-if=" {} ">Object</p>
        <p v-if=" [] ">Array</p>
        <p v-show=" 2>1 ">2>1</p>
        <p v-show=" true&&false ">true&&false</p>
        <p v-show=" 1+1==2?true:false ">1+1==2?true:false</p>
        <hr>
        <!-- 
            v-if 可以使用辅助指令 v-else-if v-else 等同于 if()else if()else
            + 辅助指令必须保证元素的连续性
        -->
        <input type="number" @input="age=$event.target.value">
        <p>age:{{age}}</p>
        <p v-if="age<18">少年</p>
        <p v-else-if="age<50">青年</p>
        <!-- <br> -->
        <p v-else>老年</p>
        <hr>
        <p v-if="age<18">少年</p>
        <p v-if="age>=18&&age<50">青年</p>
        <p v-if="age>=50">老年</p>
    </DIV>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:true,
            age:10
        }
    })
</script>
</html>